<template>
<div class="order-box">
  <div class="search-container">
   
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
      <el-input style="width: 250px;margin: 0 20px" v-model="form.productName" placeholder="请输入产品名称"></el-input>
      <el-date-picker
        style="margin-right: 20px;"
        v-model="form.start"
        type="datetime"
        placeholder="开始时间">
      </el-date-picker>
      <el-date-picker
        style="margin-right: 20px;"
        v-model="form.end"
        type="datetime"
        placeholder="结束时间">
      </el-date-picker>
      <el-button @click="initOrder"  type="primary"> <i class="el-icon-search"></i>查询</el-button>
      <el-button @click="reset()"   type="info"><i class="el-icon-refresh"></i>重置</el-button>
    </el-form>
  </div>
  <el-dialog v-loading="defaultVisionLoading" :title="order.date"  :visible.sync="defaultVision" :show-close="true" >
    <el-descriptions title="订单详情">
      <el-descriptions-item label="产品名称">{{productName}}</el-descriptions-item>
      <el-descriptions-item label="订单金额">{{ order.amount + '&yen;' }}</el-descriptions-item>
      <el-descriptions-item label="订单时间">{{ order.createTime }}</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">金融理财产品</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="年限">{{ order.year + '年' }}</el-descriptions-item>
      <el-descriptions-item label="年利率">{{ order.rate * 100 + '%' }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <div class="table" v-loading.body="loading"   style="z-index: 10 ;position: relative">
    <el-table   :data="ableData" style="width: 100%" :border="true">
        <el-table-column prop="amount" label="金额" width="180px">
          <template slot-scope="scope">
            {{scope.row.amount + '&yen;'}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="180px">
          <template slot-scope="scope">
            <!--时区转换-->
            {{ LocalTime(scope.row.createTime, timezoneOffset) }}
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="年利率" width="180px">
          <template slot-scope="scope">
            {{scope.row.rate * 100 + '%'}}
          </template>
        </el-table-column>
        <el-table-column prop="year" label="年限" width="180px">
          <template slot-scope="scope">
            {{scope.row.year + '年'}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="250px" align="center">
          <template slot-scope="scope">
            <el-tag style="margin-right: 20px" :type="scope.row.status?'success':'warning'">{{scope.row.status?'已支付':'未支付'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="option" label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="!scope.row.status" type="primary" @click="payment(scope.row)">点我支付</el-button>
            <el-button type="primary" @click="openDialog(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>
  <div class="page-bar">
    <el-pagination
      @current-change="pageHandler"
      @next-click="pageNext"
      @prev-click="pagePre"
      :current-page="this.form.currentPage"
      layout="prev, pager, next"
      :total="form.totalPage * 10">
    </el-pagination>
  </div>
  
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "Order",
  computed:{
    assets(){
      return parseInt(localStorage.getItem("assets"))
    },
    userId(){
      return localStorage.getItem("UID")
    }
    
  },
  data(){
    return{
      loading: false,//是否加载
      timezoneOffset: new Date().getTimezoneOffset(),//时区差
      form:{//分页查询表单的数据
        userId:localStorage.getItem("UID"),
        productName:'',
        start:'',
        end:'',
        currentPage: 1,
        pageSize: 8,
        totalPage:''
      },
      defaultVision: false,//table的加载样式
      defaultVisionLoading: false,//dialog的加载样式
      ableData: [],//table中的数据
      order: {},//dialog中的数据
      productName:''//用来保存获取某个订单的detail
    }
  },
  methods: {
    //打开对话框
    openDialog(item){
      if (!this.defaultVision){
        this.order = item
        axios.post('/FinancialRecommend/order/detail',this.order)
        .then(response => {
          this.productName = response.data.data
          this.defaultVision = !this.defaultVision
        })
      }
    },
    //查询订单
    initOrder(){
      this.loading = true
      axios.post('/FinancialRecommend/order/query',this.form)
      .then(response => {
        console.log(response)
        this.ableData = response.data.data.pageList
        this.form.totalPage =  response.data.data.totalPage
        //加载动画
        setTimeout(() => {
          this.loading = false
        },500)
      })
    },
    //TODO 时区转换 解决时差问题
    LocalTime(time , offset) {
      const utcTime = new Date(time);
      const localTime = new Date(utcTime.getTime() - (offset * 60 * 1000));
      // 自定义输出时间格式，例如："2023-07-27 10:00:00"
      const formattedTime = localTime.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
      });
      return formattedTime;
    },
    //下一页
    pageNext(){
      this.form.currentPage++
      this.initOrder()
    },
    pagePre(){
      this.form.currentPage--
      this.initOrder()
    },
    pageHandler(newPage){
      this.form.currentPage = newPage
      this.initOrder()
    },
    reset(){
      this.form.start = ''
      this.form.end = ''
      this.form.currentPage  = 1
      this.initOrder()
    },
    //支付方法
    payment(item){
      if (this.assets < item.amount ){
        this.$message({
          message: '资产不足，请联系管理员充值',
          type: 'error'
        })
      }else{
        item.status = 1
        axios.post('FinancialRecommend/order/pay',item).then(response => {
          localStorage.setItem("assets",this.assets - item.amount)
          console.log(response)
          this.$message({
            message: response.data.msg,
            type: 'success'
          })
          //支付成功之后，还需要重新加载用户的资产
          this.getAssets()
        })
       
      }
    },
    //从数据库重新获取资产
    getAssets(){
      axios.post('FinancialRecommend/user/assets', this.userId)
        .then(response => {
          localStorage.setItem("assets",response.data.data)
        })
    }
  },
  created() {
    this.loading = true
    setTimeout(() => {
      this.loading = false
    },500)
    this.initOrder()
  }
}
</script>

<style scoped>
.order-box{
  width: 90%;
  margin: 0 auto;
  z-index: 10;
  padding-top: 70px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.search-container{
  display: flex;
  margin: 30px 0;
  justify-content: center;
}
.table{
  min-height: 500px;
  padding: 40px;
}
.page-bar{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.loading-overlay {
  z-index: 1; /* 设置一个较低的层级值 */
}
</style>
